<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入标题" v-model="queryInfo" clearable>
          </el-input>
        </el-col>
        <el-col :span="1">
          <el-button icon="el-icon-search" @click="getNoticeList()" ></el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加公告</el-button>
        </el-col>

      </el-row>
      <el-table :data="noticeList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="内容" prop="content"></el-table-column>
        <el-table-column label="发布时间" prop="publishTime"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="removeNotice(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 4, 8, 10]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </el-card>

    <el-dialog
        title="添加公告"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogVisible=false,notice={}">
      <el-form :model="notice" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="notice.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="notice.content"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNotice()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import noticeApi from "@/api/notice";
export default {
  name: "Notice",
  data(){
    return{
      page:1,
      limit:2,
      total:0,
      queryInfo:'',
      notice:{},
      addFormRules:{
        title:[
          {required: true, message: "公告标题不能为空", trigger: 'blur'},
        ],
        content:[
          {required: true, message: "公告内容不能为空", trigger: 'blur'},
        ]
      },
      addDialogVisible:false,
      noticeList:[],
    }
  },
  created() {
    this.init()
  },
  methods:{
    async init(){
      await this.getNoticeList()
    },
    async getNoticeList(){
      this.noticeList=[]
      const{data:res} = await noticeApi.find(this.page,this.limit,this.queryInfo)
      if(res.code===200){
        this.noticeList = res.data.records
        this.total = res.data.total
        this.page = res.data.current
      }else{
        return this.$message.error('获取公告列表失败')
      }
    },
    handleSizeChange(newSize){
      this.limit =newSize
      this.getNoticeList()
    },
    handleCurrentChange(newPage){
      this.page=newPage
      this.getNoticeList()
    },
    async removeNotice(id){
      const confirmResult =await this.$confirm('此操作将删除该公告, 是否继续?', '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err=>err)

      if(confirmResult!='confirm'){
        return this.$message.info('已取消删除')
      }else{
        const {data:res}= await noticeApi.delete(id)
        if(res.code===200){
          this.$message.success('删除成功')
          await this.getNoticeList()
        }else{
          return this.$message.error('删除失败')
        }
      }
    },
    async saveNotice(){
      const {data:res}= await noticeApi.add(this.notice)
      if(res.code===200){
        this.$message.success('添加成功')
        this.addDialogVisible=false
        this.notice = {}
        await this.getNoticeList()
      }else {
        return this.$message.error('添加失败')
      }
    }
  },
}
</script>

<style lang="less" scoped>

</style>




